import React from 'react'
import date from '../../../const/date'
import styles from '../../../css/date.module.css'

import Config from '../../../Config'
import { getClassNumInfo } from '../../../service/AttendService'
import { getTOKEN } from '../../../utils/StorageUtil';
const datepicker = date.getMonthData
class DateWeek extends React.Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }
  componentWillMount() {
    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth() + 1;
    var today_date = today.getDate()
    var Month = {
      year: year,
      month: month,
      name: year + '年' + month + '月',
      list: datepicker(year, month)
    }

    const weeks = sliceArray(Month.list, 7) // 将本月拆分为以周为单位的二维数组

    let tt // 今天的索引
    const weekList = []  // 日历上与今天同一列的每一天
    let weekIndex = 0 // 本周在本月二维数组的索引
    Month.list.forEach((item, index) => {
      item.day = (index + 1) % 7
      if (month === item.month && today_date === item.showDate) {
        tt = index + 1
        // 加一是为了与星期几对应
      }
    })
    // 日历上今天同一列的日期列表
    Month.list.forEach((item, index) => {
      if (item.day === tt % 7) {
        weekList.push(item)
      }
    })
    // 获取本周的索引
    let t_date
    weekList.forEach((item, index) => {
      if (today_date === item.showDate) {
        t_date = item.date
        weekIndex = weekList.indexOf(item)
      }
    })
    // 获取本周
    Month.thisWeek = weeks[weekIndex]
    this.getClassNumInfo(year, Month, today_date)
    this.setState({
      Month: Month,
      year: year,
      month: month,
      today_date: today_date,
      t_date: t_date
    })
  }
  // 获取班次信息
  getClassNumInfo = (year, Month, today_date) => {
    getClassNumInfo({
      token: getTOKEN()
    })
      .then(
        res => {
          // 今天为选中日
          for (let i = 0; i < 7; i++) {
            Month.thisWeek[i] = { ...Month.thisWeek[i], classInfo: res.data[i] }
            if (today_date === Month.thisWeek[i].showDate) {
              Month.thisWeek[i].selectedClass = active
              this.props.selectDate({ year, ...Month.thisWeek[i] })
            }
          }
          this.setState({
            Month: Month
          })

        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  // 点击选择日期
  getDate = (o) => {

    // if(o.date<=this.state.t_date){
    var Month = this.state.Month;
    for (var j = 0; j < Month.thisWeek.length; j++) {
      Month.thisWeek[j].selectedClass = {};
      if (Month.thisWeek[j].date === o.date) {
        Month.thisWeek[j].selectedClass = active;
      }
    }
    this.props.selectDate(o)
    this.setState({
      Month: Month,
      startDate: o
    })
    // }

  }
  componentDidMount() {
    const dateWrapper = this.refs.dateWrapper
    console.log(dateWrapper.clientWidth)
    this.setState({
      dateWidth: (dateWrapper.clientWidth - 25) / 7 + 'px'
    })
  }
  render() {
    const { Month, year, month, today_date, dateWidth } = this.state
    return (
      <div className={styles['container']} >
        <div className={styles['thisMonth']} style={{ color: Config.BaseColor }} >{Month.name}</div>

        <div className={styles['month']} ref='dateWrapper'>
          <div className={styles['week']}>
            <div>一</div>
            <div>二</div>
            <div>三</div>
            <div>四</div>
            <div>五</div>
            <div>六</div>
            <div>日</div>
          </div>
          {
            Month.thisWeek.map((item, index) => {
              return <DateItem
                click={this.getDate}
                key={index}
                year={year}
                month={month}
                item={item}
                todayDate={today_date}
                width={dateWidth}
              />
            })
          }
        </div>
      </div>
    )
  }
}
const DateItem = ({ year, month, item, todayDate, click, width }) => {
  const styleDate = item.showDate >= todayDate && item.month === month ? {} : color999
  var selected = item.selectedClass2 ? selected : {}
  return (
    <div className={styles["date"]}
      style={{ ...styleDate, width: width }}
    >
      <div className={styles['date2']} style={{ ...selected, width: width }}>
        <div className={styles['date_str']}
          style={{
            fontSize: '26px',
            transform: 'scale(0.5)',
          }}
          onClick={() => click({
            year,
            ...item
          })}
          style={item.selectedClass}
        >
          <div >{item.showDate}</div>
        </div>
        <div className={styles['date_disc']}
          style={{ color: color999 }}
        >
        </div>
      </div>
    </div>
  )
}
const color999 = {
  color: '#999'
}

const active = {
  color: '#fff',
  background: Config.BaseColor
}

var selected = {
  color: '#fff',
  background: 'rgba(61,175,188,0.5)'
}
function sliceArray(array, size) {
  var result = [];
  for (var x = 0; x < Math.ceil(array.length / size); x++) {
    var start = x * size;
    var end = start + size;
    result.push(array.slice(start, end));
  }
  return result;
}
export default DateWeek